<template>
  <KView class="address-picker-cell">
    <sys-cell is-link v-model="address" :title="title" :title-width="titleWidth" :placeholder="placeholder" type="text" @cell-click="cellClick">
    </sys-cell>

    <sys-dialog :visible.sync="openDialog" :left="0" :bottom="0" width="100%" height="90%" animation-name="bottom">
      <template slot-scope="scope">
        <address-picker v-if="scope.isShow" v-model="codeData" :placeholder="placeholder" @change="change" @close-click="closeDialog"></address-picker>
      </template>
    </sys-dialog>
  </KView>
</template>

<script>
  import SysCell from 'common/sysCell';
  import SysDialog from 'common/sysDialog';
  import AddressPicker from './addressPicker';

  export default {
    props: {
      value: {
        type: Object,
        required: true
      },
      title: String,
      titleWidth: [Number, String],
      placeholder: String
    },

    computed: {
      address() {
        let codeData = this.codeData;
        let data = [];
        let fields = ['province', 'city', 'area', 'street'];
        for (let i = 0; i < fields.length; i++) {
          const field = fields[i];
          let obj = codeData[field];
          if (obj === undefined) {
            break;
          }
          data.push(obj.name);
        }

        return data.join('');
      }
    },

    watch:{
      value(){
        if (this.inputCode !== null) {
          this.inputCode = null;
          return;
        }

        this.codeData = this.value;
      }
    },

    data() {
      return {
        codeData: this.value,
        inputCode: null,
        openDialog: false
      };
    },

    methods: {
      cellClick() {
        this.openDialog = true;
      },

      change(){
        this.openDialog = false;

        let codeData = this.codeData;
        this.inputCode = codeData;
        this.$emit('input',codeData);
        this.$emit('change',codeData);
      },

      closeDialog() {
        this.openDialog = false;
      }
    },

    components: {
      SysCell,
      SysDialog,
      AddressPicker
    }
  };

</script>

<style lang="scss">


</style>
